<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>动态线程池管理平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 1400px;
            margin: 20px auto;
        }
        .header {
            background-color: #409EFF;
            color: white;
            padding: 15px 0;
            margin-bottom: 20px;
        }
        .table-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn-primary {
            background-color: #409EFF;
            border-color: #409EFF;
        }
        .btn-primary:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
        }
        .table th {
            white-space: nowrap;
            background-color: #f5f7fa;
        }
        .table td {
            vertical-align: middle;
        }
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-normal {
            background-color: #67C23A;
            color: white;
        }
        .status-warning {
            background-color: #E6A23C;
            color: white;
        }
        .status-danger {
            background-color: #F56C6C;
            color: white;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h2>动态线程池管理平台</h2>
        </div>
    </div>

    <div class="container">
        <div class="table-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4>线程池列表</h4>
                <button class="btn btn-primary" onclick="refreshList()">刷新</button>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>应用名称</th>
                            <th>线程池名称</th>
                            <th>核心线程数</th>
                            <th>最大线程数</th>
                            <th>活跃线程数</th>
                            <th>池中线程数</th>
                            <th>队列类型</th>
                            <th>队列任务数</th>
                            <th>剩余容量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="threadPoolList">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改线程池配置</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="appName">
                        <input type="hidden" id="threadPoolName">
                        <div class="mb-3">
                            <label class="form-label">应用名称</label>
                            <input type="text" class="form-control" id="appNameDisplay" disabled>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">线程池名称</label>
                            <input type="text" class="form-control" id="threadPoolNameDisplay" disabled>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">核心线程数</label>
                            <input type="number" class="form-control" id="corePoolSize" min="1" max="100">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">最大线程数</label>
                            <input type="number" class="form-control" id="maximumPoolSize" min="1" max="200">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveConfig()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        const API_BASE_URL = '/api/v1/dynamic/thread/pool';
        let editModal;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            editModal = new bootstrap.Modal(document.getElementById('editModal'));
            refreshList();
        });

        // 刷新列表
        async function refreshList() {
            try {
                const response = await fetch(`${API_BASE_URL}/queryThreadPoolList`);
                const result = await response.json();
                if (result.code === "0000") {
                    const tbody = document.getElementById('threadPoolList');
                    tbody.innerHTML = '';
                    result.data.forEach(item => {
                        const queueUsage = item.queueSize / (item.queueSize + item.remainingCapacity);
                        const queueStatusClass = queueUsage > 0.8 ? 'status-danger' : 
                                               queueUsage > 0.5 ? 'status-warning' : 'status-normal';
                        
                        tbody.innerHTML += `
                            <tr>
                                <td>${item.appName}</td>
                                <td>${item.threadPoolName}</td>
                                <td>${item.corePoolSize}</td>
                                <td>${item.maximumPoolSize}</td>
                                <td>${item.activeCount}</td>
                                <td>${item.poolSize}</td>
                                <td>${item.queueType}</td>
                                <td>
                                    <span class="status-badge ${queueStatusClass}">
                                        ${item.queueSize}
                                    </span>
                                </td>
                                <td>${item.remainingCapacity}</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editConfig('${item.appName}', '${item.threadPoolName}')">编辑</button>
                                </td>
                            </tr>
                        `;
                    });
                } else {
                    alert(result.info);
                }
            } catch (error) {
                alert('获取线程池列表失败');
            }
        }

        // 编辑配置
        async function editConfig(appName, threadPoolName) {
            try {
                const response = await fetch(`${API_BASE_URL}/queryThreadPoolConfig?appName=${appName}&threadPoolName=${threadPoolName}`);
                const result = await response.json();
                if (result.code === "0000") {
                    const config = result.data;
                    document.getElementById('appName').value = config.appName;
                    document.getElementById('threadPoolName').value = config.threadPoolName;
                    document.getElementById('appNameDisplay').value = config.appName;
                    document.getElementById('threadPoolNameDisplay').value = config.threadPoolName;
                    document.getElementById('corePoolSize').value = config.corePoolSize;
                    document.getElementById('maximumPoolSize').value = config.maximumPoolSize;
                    editModal.show();
                } else {
                    alert(result.info);
                }
            } catch (error) {
                alert('获取线程池配置失败');
            }
        }

        // 保存配置
        async function saveConfig() {
            const config = {
                appName: document.getElementById('appName').value,
                threadPoolName: document.getElementById('threadPoolName').value,
                corePoolSize: parseInt(document.getElementById('corePoolSize').value),
                maximumPoolSize: parseInt(document.getElementById('maximumPoolSize').value)
            };

            try {
                const response = await fetch(`${API_BASE_URL}/updateThreadPoolConfig`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(config)
                });
                const result = await response.json();
                if (result.code === "0000") {
                    alert('保存成功');
                    editModal.hide();
                    refreshList();
                } else {
                    alert(result.info);
                }
            } catch (error) {
                alert('保存失败');
            }
        }
    </script>
</body>
</html>
